<!--
 @description 订单详情-订单跟踪
 @fileName TrackInfo.vue
 @author zengqiongying
 @created 2021/07/10 13:36:28
-->
<template>
  <div>
    <div class="steps_title">
      <el-steps finish-status="success">
        <el-step v-for="(item,index) in steps" :key="index" :title="item.title" :status="item.status" />
      </el-steps>
    </div>
    <div class="steps-content">
      <div v-for="(item,index) in trackInfoList" :key="index" class="item-group">
        <!-- <div class="item-list">
          <div class="i-title">{{ item.node | filterNode }}</div>
          <div class="i-time">{{ item.operateTime | filterTime }}</div>
          <div class="i-content">
            {{ item.content }}
          </div>
        </div> -->
        <template v-if="item.child">
          <div v-for="(child,i) in item.child" :key="i" class="item-list">
            <div class="i-title">
              <template v-if="i===0">{{ item.node | filterNode }}</template>
            </div>
            <div class="i-time">{{ child.operateTime | filterTime }}</div>
            <div class="i-content">
              {{ child.content }}
            </div>
          </div>
        </template>
      </div>
      <div v-if="trackInfoList.length===0" class="el-table__empty-text" style="width:100%;text-align: center;">
        暂无数据
      </div>
      <!-- <div class="item-group">
        <div class="item-list">
          <div class="i-title">审核</div>
          <div class="i-time">2021-01-02 14:37:32</div>
          <div class="i-content">
            审核账号：zengyizhu，姓名：曾艺竹，电话：13540626923
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">分拨</div>
          <div class="i-time">2021-01-01 12:30:30</div>
          <div class="i-content">
            分拨账号：zengyizhu，姓名：曾艺竹，电话：13540626923
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">公司发货</div>
          <div class="i-time">2021-01-01 12:30:30</div>
          <div class="i-content">
            配送中心：羊马配送中心，TMS发货时间：2021-01-03 02:01:23，承运司机：安中华，电话：18202320766
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">商家签收</div>
          <div class="i-time">2021-01-03 17:52:00</div>
          <div class="i-content">
            签收时间：2021-01-03 17:52:00,签收人：陈玉清,签收电话:13408695924
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">商家送货</div>
          <div class="i-time">2021-01-03 17:52:00</div>
          <div class="i-content">
            正常排工:排工单号:ES20210101008021,姓名:张元利,电话:13996207668;送货账号:HRK1002075020001,姓名:黄礼鹏,电话:15922992311;安装账号:HRK1002075020001,姓名:黄礼鹏,电话:15922992311
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">回执上传</div>
          <div class="i-time">2021-01-03 17:52:00</div>
          <div class="i-content">
            已上传回执
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">安装完毕</div>
          <div class="i-time">2021-01-03 17:52:00</div>
          <div class="i-content">
            完结任务:排工单号:ES20210101008021,姓名:张元利,电话:13996207668;送货账号:HRK1002075020001,姓名:黄礼鹏,电话:15922992311;安装账号:HRK1002075020001,姓名:黄礼鹏,电话:15922992311
          </div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-list">
          <div class="i-title">完成</div>
          <div class="i-time">2021-01-03 17:52:00</div>
          <div class="i-content">
            回执确认账号：zengyizhu，姓名：曾艺竹，电话：13540626923
          </div>
        </div>
      </div> -->

    </div>
  </div>
</template>

<script>
import tabMixin from './mixin'
import { parseTime } from '@/utils'
// import { fetchOrderDetail } from '@/api/mscInfo'
const statusList = [
  { state: 0, title: '付款' },
  { state: 1, title: '审核' },
  { state: 2, title: '分拨' },
  { state: 3, title: '公司发货' },
  { state: 4, title: '商家签收' },
  { state: 5, title: '商家送货' },
  { state: 6, title: '上传回执' },
  { state: 7, title: '送装完毕' },
  { state: 8, title: '完成' },
  { state: 9, title: '已关闭' }
]
export default {
  name: 'OrderTrackInfo',
  filters: {
    filterNode(val) {
      const node = statusList.find(v => v.state === Number(val || 0))
      return (node && node.title) || val
    },
    filterTime: parseTime
  },
  mixins: [tabMixin],
  data() {
    return {
      activeStep: 0,
      steps: [],
      trackInfoList: []
    }
  },
  computed: {

  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const infoList = []
      if (this.orderData && this.orderData.trackInfoList) {
        this.orderData.trackInfoList.forEach(v => {
          const index = infoList.findIndex(e => e.node === v.node)
          if (index === -1) {
            infoList.push({
              node: v.node,
              child: [v]
            })
          } else {
            const child = infoList[index].child || []
            child.push(v)
            infoList[index].child = child
          }
        })
      }
      this.trackInfoList = infoList
      if (this.trackInfoList.length === 0) {
        this.steps = statusList
        return
      }
      // 判断是否已关闭
      const isClose = this.trackInfoList.some(v => Number(v.node || 0) === 9)
      if (isClose) {
        this.steps = this.trackInfoList.map(row => {
          const state = Number(row.node || 0)
          const obj = statusList.find(v => v.state === state)
          return {
            state,
            title: (obj && obj.title) || row.node,
            status: 'finish'
          }
        })
        this.activeStep = this.trackInfoList.length
        return
      }
      // 最后一步的状态值
      const lastNode = this.trackInfoList[this.trackInfoList.length - 1].node
      const lastState = Number(lastNode || 0)
      const stepTmp = statusList.filter(v => v.state !== 9)
      this.steps = stepTmp.map(v => {
        // 步骤状态： wait / process / finish / error / success
        let status = 'process'
        if (v.state > lastState) {
          // 还未执行的流程
          status = v.state === lastState + 1 ? 'process' : 'wait'
        } else {
          // 已执行流程
          const isFinish = this.trackInfoList.some(row => Number(row.node || 0) === v.state)
          status = isFinish ? 'finish' : 'wait'
        }
        return {
          ...v, ...{ status }
        }
      })
      this.activeStep = this.steps.findIndex(v => v.state === Number(lastNode || 0))
    }
  }
}

</script>
<style lang='scss' scoped>
.steps_title{
   padding: 0 50px;
   /deep/ .el-step__head.is-success{
     color:#3DC094;
     border-color: #3DC094;
   }
  /deep/ .el-step__title{
     font-size: 12px;
     &.is-success{
      color:#3DC094;
     }
   }

   /deep/.el-step__icon{
     width: 20px;
     height: 20px;
     font-size: 12px;
   }
}
.steps-content{
  margin-top: 20px;
  padding: 0 50px;
  .item-group{
    border-bottom: 1px solid #dcdcdc;
    padding: 20px 0;
    line-height: 24px;
    font-size: 12px;
  }
  .item-list{
    display: flex;
    .i-title{
      width: 120px;
      color: #3DC094;
    }
    .i-time{
      width: 200px;
    }
    .i-content{
      flex: 1;
    }
  }
}
</style>
